<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Magic_shop-找回密码</title>
    <link rel="shortcut icon" href="./faviconcoffee.ico" />
    <link rel="stylesheet" th:href="@{../../mall/css/common.css}">
    <link rel="stylesheet" th:href="@{../../mall/styles/user-pass-reset.css}">
    <link rel="stylesheet" th:href="@{../../mall/styles/layout/header-simple.css}">
</head>
<body>
<div th:replace="mall/header-simple::header-simple-fragment"></div>
<div class="form center">
    <div class="login">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">找回密码</div>
                <div class="right fr"><a href="login.html" target="_self">返回登录</a></div>
                <div class="clear"></div>
                <div class="under-line center"></div>
            </div>
            <form id="usernameForm" onsubmit="return false" action="##">
                <div class="login_main center">
                    <div class="login-info">
                        用户名：<input class="login-info-input" type="text" name="username" id="username" placeholder="请输入你的用户名">
                    </div>
                    <div class="login_submit">
                        <input class="submit" type="submit" onclick="userPassReset()" value="下一步">
                    </div>
                </div>
            </form>
            <form id="questionForm" onsubmit="return false" action="##">
                <div class="login_main center">
                    <p>密码提示问题是：
                        <span class="question"></span>
                    </p>
                    <div class="login-info">
                        问题答案：<input class="login-info-input" type="text" name="answer" id="answer" placeholder="请输入你的问题答案">
                    </div>
                    <div class="login_submit">
                        <input class="submit" type="submit" onclick="checkAnswer()" value="下一步">
                    </div>
                </div>
            </form>
            <form id="passwordNewForm" onsubmit="return false" action="##">
                <div class="login_main center">
                    <div class="login-info">
                        新密码：<input class="login-info-input" type="password" name="passwordNew" id="passwordNew" placeholder="请输入你的新密码">
                    </div>
                    <div class="login_submit">
                        <input class="submit" type="submit" onclick="setNewPassword()" value="完成设置">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<!-- jQuery -->
<!--<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>-->
<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $("#questionForm,#passwordNewForm").hide();
    });

    var question;
    var forgetToken;

    function userPassReset() {
        var username = $("#username").val();
        var url = '/forget_get_question';
        if (!validUserName(username)){
            swal('请输入正确的用户名格式（4到16位字符）',{
                icon:"error",
            })
            return false;
        }
        $.ajax({
            type:'POST',
            url:url,
            data: {username:username},//data写错成date
            success:function (result) {
                if (result.resultCode == 200){
                    // 做一个容器的切换
                    $("#usernameForm,#passwordNewForm").hide().siblings('#questionForm').show()
                    .find('.question').text(result.message);
                    question = result.message;
                }else {
                    swal(result.message,{
                        icon:"error",
                    });
                }
            },
            error:function () {
                swal('操作失败',{
                    icon:"error",
                });
            }
        });
    }

    function checkAnswer() {
        var username = $("#username").val();
        var answer = $("#answer").val();
        var url = '/forget_check_answer';
        if (isNull(answer)){
            swal('答案不能为空',{
                icon:"error",
            })
            return false;
        }
        $.ajax({
            type:'POST',
            url:url,
            data: {
                username:username,
                question:question,
                answer:answer,
            },
            success:function (result) {
                if (result.resultCode == 200){
                    // 做一个容器的切换
                    $("#usernameForm,#questionForm").hide().siblings('#passwordNewForm').show();
                    forgetToken = result.message;
                }else {
                    swal(result.message,{
                        icon:"error",
                    });
                }
            },
            error:function () {
                swal('操作失败',{
                    icon:"error",
                });
            }
        });
    }

    function setNewPassword() {
        var username = $("#username").val();
        var url = '/forget_reset_password';
        var passwordNew = $("#passwordNew").val();
        if (!validPassword(passwordNew)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        $.ajax({
            type:'POST',
            url:url,
            data: {
                username:username,
                passwordNew:passwordNew,
                forgetToken:forgetToken
            },
            success:function (result) {
                if (result.resultCode == 200){
                    // 做一个容器的切换
                    window.location.href = './result.html?type=pass-reset';
                }else {
                    swal(result.message,{
                        icon:"error",
                    });
                }
            },
            error:function () {
                swal('操作失败',{
                    icon:"error",
                });
            }
        });
    }
</script>
</html>